import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-publish-gowith-form',
  templateUrl: './publish-gowith-form.component.html',
  styleUrls: ['./publish-gowith-form.component.css']
})
export class PublishGowithFormComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    
  }

  // 需要去导入 ElementRef 类型
  @ViewChild("file") myUpload:ElementRef;
  imgUrl:string = "../../../assets/img/add.png";

  clickFile(){
    // console.log(1);
    // @ViewChild 获取当前组件html 中任意的 包装后的 页面元素
    // 可以理解为 id 选择器  @ViewChild(页面中元素的id)
    // console.log(this.myUpload);
    this.myUpload.nativeElement.click();
  }

  selectFile(event:any){
    let that = this;
    // 存在文件渲染的类
    let reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    // console.log(event);
    // 不要使用 => 函数
    reader.onload = function(){
      that.imgUrl = this.result;
    }
  }

}
